import React from "react";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";
import Select from "@material-ui/core/Select";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
import {FormDatePicker ,FormTimePicker,MuiPickersUtilsProvider,DateFnsUtils} from "./DatePicker"
import $ from "jquery";

import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
// import _ from "lodash";
// import { Input } from "@material-ui/core";

export default function FormDialog(props) {
	// const [open, setOpen] = React.useState(false);

	// const handleClickOpen = () => {
	// 	setOpen(true);
	// };
	const formId = (Math.random() + "").substring(2);

	const handleClose = () => {
		props.setOpen(false);
	};

	function handleSubmit(e) {
		e.preventDefault();
		var $form = $("#" + formId);
		console.log("form:", $form, $form.serialize(), $form.find("input").val());
		
		if(props.handleSubmit){
			var r = props.handleSubmit($form.serialize(), $form)
			if(r.then) {
				r.then((data)=>{
					if(data.State ==0) {
						props.setOpen(false);
					}else {
						alert(data.Message)
					}
				})
				.catch((e)=>{
					console.log(e)
				})
			}else {
				props.setOpen(false);
			}

		}
	}

	// let [date, setDate] = React.useState(null);

	// var fieldMap = {};

	return (
		<Dialog open={props.open} onClose={handleClose} aria-labelledby="form-dialog-title" maxWidth="md" fullWidth>
			<DialogTitle id="form-dialog-title">添加</DialogTitle>
			<MuiPickersUtilsProvider utils={DateFnsUtils}>
				<DialogContent>
					<Grid component="form" id={formId} method="post" container spacing={4}>
						{props.fields.map((f) => {
							if (!f.type || f.type == "text"|| f.type=="number") {
								return (
									<Grid item xs={f.xs || 6} key={f.id||f.name} >
										<TextField margin="dense" name={f.name} label={f.label} type={f.type||"text"} fullWidth />
									</Grid>
								);
							}
							if (f.type == "switch") {
								return (
									<Grid item xs={f.xs || 6} key={f.id||f.name} >
										<FormControlLabel name={f.name} label={f.label} control={<Switch color="primary" />} />
									</Grid>
								);
							}
							if (f.type == "date") {
								return (
									<Grid item xs={f.xs || 6} key={f.id||f.name} >
										<FormDatePicker name={f.name} label={f.label}></FormDatePicker>
									</Grid>
								);
							}
							if (f.type == "time") {
								return (
									<Grid item xs={f.xs || 6} key={f.id||f.name} >
										<FormTimePicker name={f.name} label={f.label}></FormTimePicker>
									</Grid>
								);
							}
							if (f.type == "file") {
								return (
									<Grid item xs={f.xs || 6} key={f.id||f.name} >
										<TextField type="file" margin="dense" name={f.name} label={f.label} fullWidth />
									</Grid>
								);
							}
							if ((f.type == "select")) {
								return (
									<Grid item xs={f.xs || 6} key={f.id||f.name} >
										<FormControl fullWidth margin="dense">
											<InputLabel>{f.label}</InputLabel>
											<Select
												native
												inputProps={{
													name: f.name,
												}}
											>
												<option aria-label="None" value="" />
												{f.options.map((o) => {
													return <option value={o.value} key={o.value}>{o.label}</option>;
												})}
											</Select>
										</FormControl>
									</Grid>
								);
							}
						})}
					</Grid>
				</DialogContent>
			</MuiPickersUtilsProvider>
			<DialogActions>
				<Button onClick={handleClose} color="secondary">
					取消
				</Button>
				<Button onClick={handleSubmit} color="primary">
					确定
				</Button>
			</DialogActions>
		</Dialog>
	);
}
